<template>
  <div>
    <div class="redTltle">
      <van-row>
        <van-col span="2">
          <van-icon name="arrow-left" @click="routerBack"/>
        </van-col>
        <van-col span="6" offset="7">
          <div class="redTltle">党刊大数据</div>
        </van-col>
      </van-row>
    </div>
    <div class="title">
      <div class="TitleImg">
        党刊数据分析
      </div>
    </div>
<!--    第一部分六本书 影响因子等-->
    <div>
      <van-tabs v-model="active" title-active-color="#ae2536" style="width: 100%"  @click="onClick">
        <van-tab title="影响因子TOP6" class="boxFlxe">
          <div v-for="(item,index) in top6One" @click="tobookDetails(item,index)">
            <van-image
                width="2.36rem"
                height="3.227rem"
                :src="ip + item.pinyinName +'.jpg'"
            />
            <div class="bookTitle">{{ item.title }}</div>
          </div>

        </van-tab>
        <van-tab title="被引频次TOP6" class="boxFlxe">
          <div v-for="(item,index) in top6One" @click="tobookDetails(item,index)">
            <van-image
                width="2.36rem"
                height="3.227rem"
                :src="ip + item.pinyinName +'.jpg'"
            />
            <div class="bookTitle">{{ item.title }}</div>
          </div>
        </van-tab>
        <van-tab title="下载频次TOP6" class="boxFlxe">
          <div v-for="(item,index) in top6One" @click="tobookDetails(item,index)">
            <van-image
                width="2.36rem"
                height="3.227rem"
                :src="ip + item.pinyinName +'.jpg'"
            />
            <div class="bookTitle">{{ item.title }}</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
<!--     第2部分饼图 -->
    <div class="title">
      <div class="TitleImg">
        文献数据分析
      </div>
    </div>
    <div class="top2title">
      文献发布分布图
    </div>
    <div>
      <div class="echs-box">
        <!--        //Echarts-->
        <div id="myChart" ref="top" class="top-child-foot"></div>
      </div>
    </div>
<!--    第三部分-->
    <div>
      <van-tabs v-model="activeBottom" title-active-color="#ae2536" style="width: 100%"  @click="onClickbottom">
        <van-tab title="被引频次TOP8">
          <div v-for="item in textList" @click="torouter(item)">
            <div class="textListTitle">
              {{ item.title }}
            </div>
            <div class="textListName">
              <van-row>
                <van-col span="8" class="overH">作者：{{ item.author }}</van-col>
                <van-col span="8" class="overH">刊名：{{ item.chinesePeriodicalTitle }}</van-col>
                <van-col span="8" class="overH">被引频次：{{ item.citedFrequency }}</van-col>
<!--                <van-col span="10" offset="4">offset: 4, span: 10</van-col>-->
              </van-row>
            </div>
            <div class="lions"></div>
          </div>
        </van-tab>
        <van-tab title="下载频次TOP8">
          <div v-for="item in textList"  @click="torouter(item)">
            <div class="textListTitle">
              {{ item.title }}
            </div>
            <div class="textListName">
              <van-row>
                <van-col span="8" class="overH">作者：{{ item.author }}</van-col>
                <van-col span="8" class="overH">刊名：{{ item.chinesePeriodicalTitle }}</van-col>
                <van-col span="8" class="overH">下载频次：{{ item.downloadTimes }}</van-col>
                <!--                <van-col span="10" offset="4">offset: 4, span: 10</van-col>-->
              </van-row>
            </div>
            <div class="lions"></div>
          </div>
        </van-tab>

      </van-tabs>
    </div>
    <div style="margin-bottom: 1rem">
    </div>
  </div>
</template>

<script>
import {rankList,circlePic,dataAnalysis} from '@/api/journalApi/BigDataApi'
import utils from '@/utils/yjglconfig'
import {Toast} from "vant";

export default {
  name: "bigData",
  data() {
    return {
      top6One:'',//顶部图片
      ip:utils.bigDataimg,//图片拼接地址
      activeBottom: 0, //下菜单切换
      active: 0, //上菜单切换
      textList:[],//底部文字
      EchersList:[],
      // [{value: 1048, name: 'Search Engine'},
      // {value: 735, name: 'Direct'},
      // {value: 580, name: 'Email'},
      // {value: 484, name: 'Union Ads'},
      // {value: 300, name: 'Video Ads'}],//y轴的数据
      topChart: null,
    };
  },
  created() {
    //console.log(this.ip)
    rankList({
      "limitNumber": 6,
      "type":"影响因子"
    })
        .then(res=>{
          // console.log(res.data)
          this.top6One=res.data.data
        })
        .catch(err=>{

        })

    dataAnalysis({
      "limitNumber": 8,
      "type":"被引频次"
    })
        .then(res=>{
          // console.log(res.data)
          this.textList=res.data.data
        })
        .catch(err=>{

        })
  },

  mounted() {
    this.initTopCharts(this.EchersList)

    circlePic()
        .then(res=>{

          this.EchersList = res.data.data

          this.EchersList = JSON.parse(JSON.stringify(this.EchersList));
        })
        .catch(err=>{

        })
    if(this.EchersList){
      setTimeout(()=>{
       // console.log(this.EchersList)
        this.initTopCharts()

      },800)
    }


  },
  methods: {
    tobookDetails(item,index){
      this.$router.push({path: '/bookDetails',query: {ids: item.pinyinName}})
    },
    //跳知网链接
    torouter(item,index){
           this.$router.push({
        path: "/readDownload",
        query: {
          fileName: item.fileName,
          dataSource: item.dataSource,
          tableName: item.tableName,
          sysId: item.sysID,
        },
      });
      //window.open('https://kns.cnki.net/kcms/detail/detail.aspx?dbcode=CAPJ&dbname='+item.tableName+'&filename='+item.fileName,'_blank')//
    },
    initTopCharts(x) {
     // console.log(this.EchersList)
      this.topChart = this.$echarts.init(this.$refs.top);
      // 使用刚指定的配置项和数据显示图表。
     // console.log(this.topChart)
      this.topChart.setOption({
        // color: ['#5BB9FF'],//调色板，多个请在后面加
        title: {
          text: '', //大标题
          // subtext: 'Fake Data',小标题
          left: 'center'
        },

        tooltip: {
          trigger: 'item',//柱形图请使用item
        },//提示框组件
        legend: { //图例组件，就是上面的图例
          orient: 'horizontal',
          x: 'center',      //可设定图例在左、右、居中
          y: 'bottom',     //可设定图例在上、下、居中
          padding: [0, 0, 0, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        },
        series: [{
          //想显示图例，可以在这个series里面添加name属性
          name: this.EchersList.name,
          type: 'pie',//饼形图
          barWidth: '50%',//调整柱形图宽度大小
          radius: '50%',
          data:this.EchersList,
          // this.EchersList,
          // [{value: 1048, name: 'Search Engine'},
          // {value: 735, name: 'Direct'},
          // {value: 580, name: 'Email'},
          // {value: 484, name: 'Union Ads'},
          // {value: 300, name: 'Video Ads'}],//y轴的数据
          //symbolSize: 13 这个是折线图里面拐点的大小
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })
     // console.log(this.EchersList)
      window.addEventListener('resize', () => {
        this.topChart.resize()
      })//适配大小屏
    },
    //返回按钮
    routerBack() {
      this.$router.go(-1)
    },
    //顶部菜单切换请求
    topSiximg(x){
      rankList(x)
          .then(res=>{
            // console.log(res.data)
            this.top6One=res.data.data
          })
          .catch(err=>{

          })
    },
    //顶部菜单切换
    onClick(name, title) {
      if(name == 0 ){
        let obj = {
          "limitNumber": 6,
          "type":"影响因子"
        }
        this.topSiximg(obj)
      }else if(name == 1){
        let obj = {
          "limitNumber": 6,
          "type":"被引频次"
        }
        this.topSiximg(obj)
      }else if(name == 2){
        let obj = {
          "limitNumber": 6,
          "type":"下载频次"
        }
        this.topSiximg(obj)
      }
      // Toast(name);
    },
    //底部菜单切换请求
    bottomtext(x){
      dataAnalysis(x)
          .then(res=>{
            // console.log(res.data)
            this.textList=res.data.data
          })
          .catch(err=>{

          })
    },
    onClickbottom(name, title) {
      if(name == 0 ){
        let obj = {
          "limitNumber": 6,
          "type":"被引频次"
        }
        this.bottomtext(obj)
      }else if(name == 1){
        let obj = {
          "limitNumber": 6,
          "type":"下载频次"
        }
        this.bottomtext(obj)
      }
      // Toast(name);
    },
  }
}
</script>

<style scoped>

.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
}
.title{
  height: 0.8rem;
  width: 100%;
  margin: 0.253rem 0;
}
.TitleImg{
  margin: 0 auto;
  background-image: url("./../../assets/bg_dksjfx.png");
  background-size: 100%;
  width: 4.213rem;
  height: 0.853rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.853rem;
}
.boxFlxe{
  display: flex;
  flex-wrap: wrap;
  width: 9.4rem;
  margin: 0 auto;
  /*height: 8.48rem;*/
}
.boxFlxe > div{
 margin: 0.2rem 0.38rem;
}
.bookTitle{
  text-align: center;
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  width:2.36rem;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.top2title{
  width: 100%;
  height: 1.12rem;
  background-color: #fafafa;
  border: solid 0.013rem #ebebeb;
  line-height: 1.12rem;
  text-align: center;
  font-family: PingFang-SC-Bold;
  font-size: 0.427rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #af2536;
}
.echs-box{
  height: 9rem;
  width: 90%;
  margin: 0 auto;
}
.top-child-foot{
  margin-top: -30px;
  height: 8rem;
}
.textListTitle{
  width: 93%;
  margin: 0.467rem auto;
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.textListName{
  width: 93%;
  margin: 0 auto;
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.5;

}
.overH{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.lions{
  width: 94%;
  margin: 0 auto;
  margin-top: 0.5rem;
  height: 0.053rem;
  /*border: solid 0.013rem #000000;*/
  opacity: 0.07;
  background-color: black;
}
</style>
